<template>
  <div class="edit-container">
    <el-card class="edit-con">
      <div class="edit-address">
        <el-form label-width="100px">


          <el-form-item label="店铺名称：">
            <el-input v-model="userInfo.shopName" />
          </el-form-item>


          <el-form-item label="所属体系：">
            <el-input v-model="userInfo.schemeType" disabled />
          </el-form-item>
          <el-form-item label="联系人：">
            <el-input v-model="userInfo.connectName" />
          </el-form-item>
          <el-form-item label="联系电话：">
            <el-input v-model="userInfo.connectPhone" />
          </el-form-item>

          <el-form-item label="所在地区：">

            <div @click="showPickerFun()" class="choose-area" :class="{ check: userInfo.province }">
              {{ userInfo.province ? userInfo.province + " " + userInfo.city + " " + userInfo.district :
              "请选择地址"
              }}
            </div>
            <div class="choose-con" id="choose-style">
              <vue-next-address-picker :visible="showPicker" @choice="choiceAddress" :pickerLevel="3" height="200px">
              </vue-next-address-picker>
            </div>
          </el-form-item>


          <el-form-item label="详细地址：">
            <el-input v-model="userInfo.connectAddress" type="textarea" />
          </el-form-item>
          <div class="warning">
            务必核实好联系人及联系地址 <br>
            以便及时收取活动物料
          </div>
          <el-row justify="center">
            <el-button @click="confirmAddress">确认保存</el-button>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>


</template>
<script setup>
import VueNextAddressPicker from "vue-next-address-picker"
import { ref, watchEffect } from "vue"
import { ElMessage } from 'element-plus';
import { useIndexApi } from '/@/api/index';
import {
  verifyPhone,

} from '/@/utils/toolsValidate';

const userInfo = ref({
  "shopName": "天津奥体中心店",
  "connectName": "迪迦",
  "connectPhone": "13688123456",
  "connectAddress": "奥体公园店3楼",
  "province": "天津市",
  "city": "市辖区",
  "district": "河东区",
  "schemeType": "玩具反斗城"
})



watchEffect(() => {
  const { connectName, connectAddress } = userInfo.value;
  if (connectName.length > 10) {
    userInfo.value.connectName = connectName.slice(0, 10)
  }
  if (connectAddress.length > 50) {
    userInfo.value.detailAddress = connectAddress.slice(0, 50)
  }
})
const showPicker = ref(false);
const choiceAddress = data => {
  showPicker.value = false;
  userInfo.value.province = data.province;
  userInfo.value.city = data.city;
  userInfo.value.district = data.area;
}
function showPickerFun() {
  showPicker.value = !showPicker.value;
}
async function getUserInfo() {
  const res = await useIndexApi().userInfo(userInfo.value);
  if (res) {
    userInfo.value = res.data;
    // ElMessage('更新成功')
  }

}
getUserInfo();
async function confirmAddress() {
  if (!userInfo.value.shopName) {
    ElMessage('请输入店铺名称')
    return false;
  }
  if (!userInfo.value.connectName) {
    ElMessage('请输入联系人')
    return false;
  }
  if (!verifyPhone(userInfo.value.connectPhone)) {
    ElMessage('请输入正确的联系号码！')
    return false;
  }
  if (!userInfo.value.province) {
    ElMessage('请选择所在地区！')
    return false;
  }
  if (!userInfo.value.connectAddress) {
    ElMessage('请填写详细地址！')
    return false;
  }



  const res = await useIndexApi().updateInfo(userInfo.value);
  if (res) {
    ElMessage('更新成功')
  }

}

</script>


<style scoped lang="scss">
.edit-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.edit-address {
  width: 100%;


  .warning {
    width: 96%;
    text-align: left;
    line-height: 24px;
    font-size: 14px;
    margin: 20px auto 40px;
  }

  .confirm {
    width: 348px;
    height: 46px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1PX solid rgb(187, 187, 187);
    text-align: center;
    background: #ffffff;
    font-size: 16px;
    color: rgb(97, 97, 97);
    margin: 0 auto;
    line-height: 44px;
    cursor: pointer;
    border-radius: 4px;
  }

  .choose-area {
    width: 100%;
    text-align: left;
    height: 40px;
    line-height: 40px;
    color: #b9b9b9;
    box-sizing: border-box;

    border: 1px solid rgb(220, 223, 230);
    border-radius: 4px;
    padding: 0 15px;

    &.check {
      color: #4f4f4f;
    }
  }

  .choose-con {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 2;
  }


}
</style>
